<template>
	<view v-if="text">
		<view v-show="active" @click.stop="active = !active">
			{{myText}}<view style="color: #4581F6;cursor: pointer;display: inline;" v-show="isShow">...展开</view>
		</view>
		<view v-show="!active" @click.stop="active = !active">
			{{text}}<view style="color: #4581F6;cursor: pointer;;display: inline;" v-show="isShow">收起</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "text-elp",
		props: {
			number: {  //字数
				type: [Number, String],
				default:20,
				required: true
			},
			text: {  //文本
				type: [Number, String],
				default: '',
				required: true
			}
		},
		data() {
			return {
			active:true
			};
		},
		computed: {
			myText() {
				if(this.text == '') {
					return ''
				}
				if (this.text?.length > 0 && this.text?.length > this.number) {
					return this.text.slice(0, this.number)
				}
				return this.text
			},
			isShow(){
				if(this.text?.length > this.number) {
					return true
				}
				return false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>